<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
<head>
  <link href="//gmpg.org/xfn/11" rel="profile">
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="Hugo 0.68.3" />

  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>无限极评论 &middot; 我的博客</title>

  
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/print.css" media="print">
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/poole.css">
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/syntax.css">
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/hyde.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface|PT+Sans:400,400i,700">


  
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144-precomposed.png">
  <link rel="shortcut icon" href="/favicon.png">

  
  
</head>

  <body class="theme-base-0b ">
  <aside class="sidebar">
  <div class="container sidebar-sticky">
    <div class="sidebar-about">
      <a href="/my_technology_blog/"><h1>我的博客</h1></a>
      <p class="lead">
       杨博的博客 
      </p>
    </div>

    <nav>
      <ul class="sidebar-nav">
        <li><a href="/my_technology_blog/">Home</a> </li>
        
      </ul>
    </nav>

    <p>&copy; 2021. All rights reserved. </p>
  </div>
</aside>

    <main class="content container">
    <div class="post">
  <h1>无限极评论</h1>
  <time datetime=2020-06-02T10:44:56&#43;0800 class="post-date">Tue, Jun 2, 2020</time>
  <p><strong>vue父子组件的使用</strong></p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue"><span style="color:#75715e">//父组件
</span><span style="color:#75715e"></span>&lt;<span style="color:#f92672">template</span>&gt;
    &lt;<span style="color:#f92672">div</span>&gt;
        <span style="color:#75715e">// 使用子组件，将子组件显示在这里
</span><span style="color:#75715e"></span>        &lt;<span style="color:#f92672">zi</span> <span style="color:#f92672">:data</span><span style="color:#e6db74">=&#34;data&#34;</span> /&gt;
    &lt;/<span style="color:#f92672">div</span>&gt;
&lt;/<span style="color:#f92672">template</span>&gt;


&lt;<span style="color:#f92672">script</span>&gt;
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">zi</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;./zi&#39;</span>		<span style="color:#75715e">// 将子组件导入父组件
</span><span style="color:#75715e"></span><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">axios</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;axios&#39;</span>

<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> {
    <span style="color:#a6e22e">name</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;fuzujian&#34;</span>,
    <span style="color:#a6e22e">data</span>() {
        <span style="color:#66d9ef">return</span> {
            <span style="color:#a6e22e">data</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#39;&#39;</span>
        }
    },
    
    
    <span style="color:#75715e">//注册子组件
</span><span style="color:#75715e"></span>    <span style="color:#a6e22e">components</span><span style="color:#f92672">:</span>{
        <span style="color:#a6e22e">zi</span>
    },
    
    
    <span style="color:#a6e22e">methods</span><span style="color:#f92672">:</span>{
        <span style="color:#a6e22e">get_info</span>(){
            <span style="color:#a6e22e">axios</span>.<span style="color:#a6e22e">get</span>(<span style="color:#e6db74">&#34;http://127.0.0.1:8000/comment/com/&#34;</span>).<span style="color:#a6e22e">then</span>(<span style="color:#a6e22e">res</span>=&gt;{
                <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">mytree</span> <span style="color:#f92672">=</span> {<span style="color:#e6db74">&#34;id&#34;</span><span style="color:#f92672">:</span><span style="color:#ae81ff">0</span>,<span style="color:#e6db74">&#34;content&#34;</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;&#34;</span>}
                <span style="color:#a6e22e">mytree</span>[<span style="color:#e6db74">&#34;childlist&#34;</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">res</span>.<span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">data</span>
                <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">data</span><span style="color:#f92672">=</span> <span style="color:#a6e22e">mytree</span>
            })
        }
    },
    <span style="color:#a6e22e">created</span>(){
        <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">get_info</span>()
    }
}
&lt;/<span style="color:#f92672">script</span>&gt;
</code></pre></div><div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue"><span style="color:#75715e">//子组件
</span><span style="color:#75715e"></span>&lt;<span style="color:#f92672">template</span>&gt;
    &lt;<span style="color:#f92672">div</span>&gt;
        
        &lt;<span style="color:#f92672">li</span>&gt;
            &lt;<span style="color:#f92672">ul</span> &gt;
                <span style="color:#a6e22e">看数据后方可精神崩溃的解放后卡加斯那可就发你</span>
            &lt;/<span style="color:#f92672">ul</span>&gt;
        &lt;/<span style="color:#f92672">li</span>&gt;
        
    &lt;/<span style="color:#f92672">div</span>&gt;
&lt;/<span style="color:#f92672">template</span>&gt;






&lt;<span style="color:#f92672">script</span>&gt;
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> {
    <span style="color:#a6e22e">name</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;zi&#34;</span>

}
&lt;/<span style="color:#f92672">script</span>&gt;

&lt;<span style="color:#f92672">style</span>&gt;
    
<span style="color:#a6e22e">ul</span>{
    <span style="color:#a6e22e">list</span><span style="color:#f92672">-</span><span style="color:#a6e22e">style</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">none</span>;
    <span style="color:#75715e">/* padding-left: 20px */</span>
}

&lt;/<span style="color:#f92672">style</span>&gt;
</code></pre></div><p><strong>父组件给子组件传参</strong></p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue"><span style="color:#75715e">//子组件
</span><span style="color:#75715e">//子组件接收父组件动态的值需要用watch监控
</span><span style="color:#75715e"></span>&lt;<span style="color:#f92672">template</span>&gt;
    &lt;<span style="color:#f92672">div</span>&gt;
        &lt;<span style="color:#f92672">input</span>  <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;button&#34;</span> <span style="color:#a6e22e">value</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;给父组件传递值&#34;</span>&gt;
        &lt;<span style="color:#f92672">li</span>&gt;
            &lt;<span style="color:#f92672">ul</span> <span style="color:#f92672">v-for</span><span style="color:#e6db74">=&#34;i in num&#34; :key=&#34;i.name&#34;</span>&gt;{{<span style="color:#a6e22e">i.name</span>}}
            &lt;/<span style="color:#f92672">ul</span>&gt;
        &lt;/<span style="color:#f92672">li</span>&gt;
        {{<span style="color:#a6e22e">zi1</span>}}
        {{<span style="color:#a6e22e">zi2</span>}}
        <span style="color:#960050;background-color:#1e0010">&lt;!--</span> {{<span style="color:#a6e22e">zi11</span>}}
        {{<span style="color:#a6e22e">zi22</span>}} <span style="color:#960050;background-color:#1e0010">--</span>&gt;
    &lt;/<span style="color:#f92672">div</span>&gt;

&lt;/<span style="color:#f92672">template</span>&gt;



&lt;<span style="color:#f92672">script</span>&gt;
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> {
    <span style="color:#a6e22e">name</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;zi&#34;</span>,
    
    <span style="color:#75715e">//引入父组件传递的方法和数据
</span><span style="color:#75715e"></span>    <span style="color:#a6e22e">props</span><span style="color:#f92672">:</span>[<span style="color:#e6db74">&#34;zi1&#34;</span>,<span style="color:#e6db74">&#34;zi2&#34;</span>],
    <span style="color:#a6e22e">data</span>() {
        <span style="color:#66d9ef">return</span> {
            
            <span style="color:#75715e">// 父组件的数据
</span><span style="color:#75715e"></span>            <span style="color:#a6e22e">num</span> <span style="color:#f92672">:</span> [{<span style="color:#e6db74">&#34;name&#34;</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;uzi&#34;</span>},{<span style="color:#e6db74">&#34;name&#34;</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;ming&#34;</span>},{<span style="color:#e6db74">&#34;name&#34;</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;xiaohu&#34;</span>},],
            <span style="color:#75715e">// zi11 : zi1,
</span><span style="color:#75715e"></span>            <span style="color:#75715e">// zi22 : zi2
</span><span style="color:#75715e"></span>        }
    },
    <span style="color:#a6e22e">watch</span><span style="color:#f92672">:</span>{
        
        <span style="color:#75715e">//父组件的方法
</span><span style="color:#75715e"></span>        <span style="color:#a6e22e">zi1</span>(<span style="color:#a6e22e">val</span>){
            
        },
         <span style="color:#a6e22e">zi2</span>(<span style="color:#a6e22e">val</span>){
            
        }
    },
    <span style="color:#a6e22e">methods</span><span style="color:#f92672">:</span> {
        
    },
    

}
&lt;/<span style="color:#f92672">script</span>&gt;

&lt;<span style="color:#f92672">style</span>&gt;
    
<span style="color:#a6e22e">ul</span>{
    <span style="color:#a6e22e">list</span><span style="color:#f92672">-</span><span style="color:#a6e22e">style</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">none</span>;
    <span style="color:#75715e">/* padding-left: 20px */</span>
}

&lt;/<span style="color:#f92672">style</span>&gt;
</code></pre></div><div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue"><span style="color:#75715e">// 父组件
</span><span style="color:#75715e"></span>&lt;<span style="color:#f92672">template</span>&gt;
    &lt;<span style="color:#f92672">div</span>&gt;
        

		<span style="color:#75715e">// 父组件给子组件传参
</span><span style="color:#75715e"></span>        <span style="color:#75715e">// :zi1=&#34;zi1&#34;为传递父组件数据   :zi2=&#34;zi2&#34; 为传递富足卷的方法函数  
</span><span style="color:#75715e"></span>        &lt;<span style="color:#f92672">zi</span> <span style="color:#f92672">:zi1</span><span style="color:#e6db74">=&#34;zi1&#34;</span> <span style="color:#f92672">:zi2</span><span style="color:#e6db74">=&#34;zi2&#34;</span>&gt;&lt;/<span style="color:#f92672">zi</span>&gt;

        &lt;<span style="color:#f92672">input</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;button&#34;</span> <span style="color:#f92672">@click</span><span style="color:#e6db74">=&#34;change_info()&#34;</span> <span style="color:#a6e22e">value</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;改变&#34;</span>&gt;
    &lt;/<span style="color:#f92672">div</span>&gt;
&lt;/<span style="color:#f92672">template</span>&gt;


&lt;<span style="color:#f92672">script</span>&gt;

<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">zi</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;./zi&#39;</span>

<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> {
    <span style="color:#a6e22e">name</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;fu&#34;</span>,
    <span style="color:#a6e22e">data</span>() {
        <span style="color:#66d9ef">return</span> {
            <span style="color:#a6e22e">data</span><span style="color:#f92672">:</span>[],
            <span style="color:#a6e22e">zi1</span><span style="color:#f92672">:</span><span style="color:#ae81ff">12</span>,
            <span style="color:#a6e22e">zi2</span><span style="color:#f92672">:</span><span style="color:#ae81ff">34</span>
        }
    },
    <span style="color:#a6e22e">components</span><span style="color:#f92672">:</span>{
        <span style="color:#a6e22e">zi</span>
       
    },
    <span style="color:#a6e22e">methods</span><span style="color:#f92672">:</span>{
        
        <span style="color:#a6e22e">change_info</span>(){
            <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">zi1</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">100</span>
            <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">zi2</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">900</span>
            <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">zi1</span>,<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">zi2</span>)
        },
        
    },
    
}
&lt;/<span style="color:#f92672">script</span>&gt;
</code></pre></div><p><strong>子组件给父组件传参</strong></p>
<p><em><strong>传递数据：子组件主要通过事件传递数据给父组件</strong></em></p>
<p>子组件定义一个方法，方法中通过this.$emit(‘transferNum’,this.num)方式发送数据num，父组件中监听transferNum事件，当事件触发时，执行函数，进行赋值。</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue"><span style="color:#75715e">// 子组件
</span><span style="color:#75715e"></span>&lt;<span style="color:#f92672">template</span>&gt;
    &lt;<span style="color:#f92672">div</span>&gt;
        &lt;<span style="color:#f92672">input</span> <span style="color:#f92672">@click</span><span style="color:#e6db74">=&#34;setNum&#34;</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;button&#34;</span> <span style="color:#a6e22e">value</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;给父组件传递值&#34;</span>&gt;
        &lt;<span style="color:#f92672">li</span>&gt;
            &lt;<span style="color:#f92672">ul</span> <span style="color:#f92672">v-for</span><span style="color:#e6db74">=&#34;i in num&#34; :key=&#34;i.name&#34;</span>&gt;{{<span style="color:#a6e22e">i.name</span>}}
            
            &lt;/<span style="color:#f92672">ul</span>&gt;
        &lt;/<span style="color:#f92672">li</span>&gt;
    &lt;/<span style="color:#f92672">div</span>&gt;
&lt;/<span style="color:#f92672">template</span>&gt;



&lt;<span style="color:#f92672">script</span>&gt;
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> {
    <span style="color:#a6e22e">name</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;zizujian&#34;</span>,
    <span style="color:#a6e22e">props</span><span style="color:#f92672">:</span>[<span style="color:#e6db74">&#34;data&#34;</span>],
    <span style="color:#a6e22e">data</span>() {
        <span style="color:#66d9ef">return</span> {
            <span style="color:#a6e22e">num</span> <span style="color:#f92672">:</span> [{<span style="color:#e6db74">&#34;name&#34;</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;uzi&#34;</span>},{<span style="color:#e6db74">&#34;name&#34;</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;ming&#34;</span>},{<span style="color:#e6db74">&#34;name&#34;</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;xiaohu&#34;</span>},]
        }
    },
    <span style="color:#a6e22e">methods</span><span style="color:#f92672">:</span> {
        
        <span style="color:#75715e">//通过方法给父组件传参
</span><span style="color:#75715e"></span>        <span style="color:#75715e">//子组件的数据和发送数据方法
</span><span style="color:#75715e"></span>        <span style="color:#75715e">//通过方法给父组件传参
</span><span style="color:#75715e"></span>        <span style="color:#a6e22e">setNum</span>(){
            <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">$emit</span>(<span style="color:#e6db74">&#39;func&#39;</span>,<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">num</span>)
        },
        
        <span style="color:#75715e">// 子组件定义一个函数，等待父组件调用
</span><span style="color:#75715e"></span>        <span style="color:#a6e22e">setFunc</span>(){
            <span style="color:#a6e22e">alert</span>(<span style="color:#e6db74">&#34;我最喜欢的选手是&#34;</span><span style="color:#f92672">+</span><span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">num</span>[<span style="color:#ae81ff">0</span>][<span style="color:#e6db74">&#34;name&#34;</span>] )
        }
    },
    

}
&lt;/<span style="color:#f92672">script</span>&gt;

&lt;<span style="color:#f92672">style</span>&gt;
    
<span style="color:#a6e22e">ul</span>{
    <span style="color:#a6e22e">list</span><span style="color:#f92672">-</span><span style="color:#a6e22e">style</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">none</span>;
    <span style="color:#75715e">/* padding-left: 20px */</span>
}

&lt;/<span style="color:#f92672">style</span>&gt;
</code></pre></div><div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue"><span style="color:#75715e">// 父组件
</span><span style="color:#75715e"></span>&lt;<span style="color:#f92672">template</span>&gt;
    &lt;<span style="color:#f92672">div</span>&gt;
        
        &lt;<span style="color:#f92672">p</span> <span style="color:#f92672">@click</span><span style="color:#e6db74">=&#34;getFunc&#34;</span>&gt;<span style="color:#a6e22e">peter的测试父组件</span>&lt;/<span style="color:#f92672">p</span>&gt;

		<span style="color:#960050;background-color:#1e0010">//</span> <span style="color:#a6e22e">父组件中监听子组件中发送函数的方法</span><span style="color:#960050;background-color:#1e0010">，</span><span style="color:#a6e22e">并赋值</span><span style="color:#960050;background-color:#1e0010">。</span>
        <span style="color:#960050;background-color:#1e0010">//</span> <span style="color:#a6e22e">父组件调用子组件</span><span style="color:#960050;background-color:#1e0010">，</span><span style="color:#a6e22e">并监听函数getNum传过来的值</span>
        <span style="color:#960050;background-color:#1e0010">//</span> <span style="color:#a6e22e">父组件中定义一个方法</span><span style="color:#960050;background-color:#1e0010">，</span><span style="color:#a6e22e">主体内容如图</span><span style="color:#960050;background-color:#1e0010">，</span><span style="color:#a6e22e">表示方法就是标识为aaa的子组件里的setFun方法</span><span style="color:#960050;background-color:#1e0010">。</span>
        &lt;<span style="color:#f92672">zizujian</span> <span style="color:#f92672">@func</span><span style="color:#e6db74">=&#34;getNum&#34;</span>  <span style="color:#a6e22e">ref</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;abc&#34;</span> &gt;&lt;/<span style="color:#f92672">zizujian</span>&gt;

        
    &lt;/<span style="color:#f92672">div</span>&gt;
&lt;/<span style="color:#f92672">template</span>&gt;


&lt;<span style="color:#f92672">script</span>&gt;

<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">zizujian</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;./zizujian&#39;</span>
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">axios</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;axios&#39;</span>

<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> {
    <span style="color:#a6e22e">name</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;showzi&#34;</span>,
    <span style="color:#a6e22e">data</span>() {
        <span style="color:#66d9ef">return</span> {
            <span style="color:#a6e22e">data</span><span style="color:#f92672">:</span>[]
        }
    },
    <span style="color:#a6e22e">components</span><span style="color:#f92672">:</span>{
        <span style="color:#a6e22e">zizujian</span>
       
    },
    <span style="color:#a6e22e">methods</span><span style="color:#f92672">:</span>{
        
        <span style="color:#75715e">//获取子组件发过来的值，并赋值打印
</span><span style="color:#75715e"></span>        <span style="color:#a6e22e">getNum</span>(<span style="color:#a6e22e">val</span>){
            <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">data</span><span style="color:#f92672">=</span><span style="color:#a6e22e">val</span>
            <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">val</span>)
        },
        
        <span style="color:#75715e">//调用gerFun方法(调用子组件方法)
</span><span style="color:#75715e"></span>        <span style="color:#a6e22e">getFunc</span>(<span style="color:#a6e22e">val</span>){
            <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">$refs</span>.<span style="color:#a6e22e">abc</span>.<span style="color:#a6e22e">setFunc</span>(<span style="color:#a6e22e">val</span>)
        }
    },
    
}
&lt;/<span style="color:#f92672">script</span>&gt;

</code></pre></div><p><strong>利用父子组件实现无限极评论</strong></p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue"><span style="color:#75715e">// 父组件
</span><span style="color:#75715e"></span>&lt;<span style="color:#f92672">template</span>&gt;
    &lt;<span style="color:#f92672">div</span>&gt;
        &lt;<span style="color:#f92672">zi</span> <span style="color:#f92672">:data</span><span style="color:#e6db74">=&#34;data&#34;</span> /&gt;
        <span style="color:#75715e">&lt;!--</span> &lt;<span style="color:#f92672">zizujian</span> <span style="color:#f92672">:data</span><span style="color:#e6db74">=&#34;data&#34;</span> /&gt; <span style="color:#f92672">--&gt;</span>
    &lt;/<span style="color:#f92672">div</span>&gt;
&lt;/<span style="color:#f92672">template</span>&gt;


&lt;<span style="color:#f92672">script</span>&gt;
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">zi</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;./zi&#39;</span>
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">axios</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;axios&#39;</span>

<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> {
    <span style="color:#a6e22e">name</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;fu&#34;</span>,
    <span style="color:#a6e22e">data</span>() {
        <span style="color:#66d9ef">return</span> {
            <span style="color:#a6e22e">data</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#39;&#39;</span>
        }
    },
    <span style="color:#a6e22e">components</span><span style="color:#f92672">:</span>{
        <span style="color:#a6e22e">zi</span>
    },
    <span style="color:#a6e22e">methods</span><span style="color:#f92672">:</span>{
        <span style="color:#a6e22e">get_info</span>(){
            <span style="color:#a6e22e">axios</span>.<span style="color:#a6e22e">get</span>(<span style="color:#e6db74">&#34;http://127.0.0.1:8000/comment/com/&#34;</span>).<span style="color:#a6e22e">then</span>(<span style="color:#a6e22e">res</span>=&gt;{
                <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">mytree</span> <span style="color:#f92672">=</span> {<span style="color:#e6db74">&#34;id&#34;</span><span style="color:#f92672">:</span><span style="color:#ae81ff">0</span>,<span style="color:#e6db74">&#34;content&#34;</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;&#34;</span>}
                <span style="color:#a6e22e">mytree</span>[<span style="color:#e6db74">&#34;childlist&#34;</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">res</span>.<span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">data</span>
                <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">data</span><span style="color:#f92672">=</span> <span style="color:#a6e22e">mytree</span>
            })
        }
    },
    <span style="color:#a6e22e">created</span>(){
        <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">get_info</span>()
    }
}
&lt;/<span style="color:#f92672">script</span>&gt;
</code></pre></div><div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue"><span style="color:#75715e">// 子组件
</span><span style="color:#75715e"></span>&lt;<span style="color:#f92672">template</span>&gt;
    &lt;<span style="color:#f92672">div</span>&gt;
        &lt;<span style="color:#f92672">li</span>&gt;{{<span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">content</span>}}
            &lt;<span style="color:#f92672">ul</span> <span style="color:#f92672">v-if</span><span style="color:#e6db74">=&#34;data.childlist &amp;&amp; data.childlist.length&gt;0&#34;</span>&gt;
            &lt;<span style="color:#f92672">zi</span> <span style="color:#a6e22e">v</span><span style="color:#f92672">-for</span><span style="color:#960050;background-color:#1e0010">=&#34;</span><span style="color:#a6e22e">i</span> <span style="color:#a6e22e">in</span> <span style="color:#a6e22e">data.childlist</span><span style="color:#960050;background-color:#1e0010">&#34;</span> <span style="color:#f92672">:key</span><span style="color:#e6db74">=&#34;i.id&#34;</span> <span style="color:#f92672">:data</span><span style="color:#e6db74">=&#34;i&#34;</span> /&gt;
            &lt;/<span style="color:#f92672">ul</span>&gt;
        &lt;/<span style="color:#f92672">li</span>&gt;
    &lt;/<span style="color:#f92672">div</span>&gt;
&lt;/<span style="color:#f92672">template</span>&gt;


&lt;<span style="color:#f92672">script</span>&gt;
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> {
    <span style="color:#a6e22e">name</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;zi&#34;</span>,
    <span style="color:#a6e22e">props</span><span style="color:#f92672">:</span>[<span style="color:#e6db74">&#34;data&#34;</span>]
}
&lt;/<span style="color:#f92672">script</span>&gt;

&lt;<span style="color:#f92672">style</span>&gt;
    
<span style="color:#a6e22e">ul</span>{
    <span style="color:#a6e22e">list</span><span style="color:#f92672">-</span><span style="color:#a6e22e">style</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">none</span>;
    <span style="color:#75715e">/* padding-left: 20px */</span>
}

&lt;/<span style="color:#f92672">style</span>&gt;
</code></pre></div><div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-python" data-lang="python"><span style="color:#75715e"># 后端</span>
<span style="color:#f92672">from</span> django.shortcuts <span style="color:#f92672">import</span> render
<span style="color:#f92672">from</span> rest_framework.views <span style="color:#f92672">import</span> APIView
<span style="color:#f92672">from</span> rest_framework.response <span style="color:#f92672">import</span> Response
<span style="color:#f92672">from</span> .serializers <span style="color:#f92672">import</span> CommentSer
<span style="color:#f92672">from</span> .models <span style="color:#f92672">import</span> Comments
<span style="color:#75715e"># Create your views here.</span>



<span style="color:#66d9ef">def</span> <span style="color:#a6e22e">change_comments</span>(data):
    list <span style="color:#f92672">=</span> []
    tree <span style="color:#f92672">=</span> {}
    root <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;&#39;</span>
    p_id <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;&#39;</span>

    <span style="color:#66d9ef">for</span> i <span style="color:#f92672">in</span> data:
        <span style="color:#75715e">#将data循环，然后加入一个dict中，key为每条数据的ID，val对应为整条数据</span>
        tree[i[<span style="color:#e6db74">&#34;id&#34;</span>]] <span style="color:#f92672">=</span> i

        <span style="color:#75715e"># print(tree)</span>

    <span style="color:#66d9ef">for</span> i <span style="color:#f92672">in</span> data:
        <span style="color:#66d9ef">print</span>(i)
        <span style="color:#66d9ef">if</span> i[<span style="color:#e6db74">&#34;p_id&#34;</span>] <span style="color:#f92672">==</span> None:
            root <span style="color:#f92672">=</span> tree[i[<span style="color:#e6db74">&#34;id&#34;</span>]]  <span style="color:#75715e">#i.di为tree里的key，将key对应的val取出</span>
            list<span style="color:#f92672">.</span>append(root)
        <span style="color:#66d9ef">else</span>:
            p_id <span style="color:#f92672">=</span> i[<span style="color:#e6db74">&#34;p_id&#34;</span>]
            <span style="color:#75715e"># 判断父级是否有孩子字段（childlist），如果有将当前数据加入，如果没有添加（childlist）后再加入</span>
            <span style="color:#66d9ef">if</span> <span style="color:#e6db74">&#34;childlist&#34;</span> <span style="color:#f92672">not</span> <span style="color:#f92672">in</span> tree[p_id]:
                tree[p_id][<span style="color:#e6db74">&#39;childlist&#39;</span>] <span style="color:#f92672">=</span> []
            tree[p_id][<span style="color:#e6db74">&#34;childlist&#34;</span>]<span style="color:#f92672">.</span>append(tree[i[<span style="color:#e6db74">&#34;id&#34;</span>]])

    <span style="color:#66d9ef">return</span> list


<span style="color:#66d9ef">class</span> <span style="color:#a6e22e">CommentView</span>(APIView):

    <span style="color:#66d9ef">def</span> <span style="color:#a6e22e">get</span>(self,request):

        comments <span style="color:#f92672">=</span> Comments<span style="color:#f92672">.</span>objects<span style="color:#f92672">.</span>filter()

        comment_ser <span style="color:#f92672">=</span> CommentSer(comments,many<span style="color:#f92672">=</span>True)

        <span style="color:#66d9ef">print</span>(comment_ser<span style="color:#f92672">.</span>data)

        data<span style="color:#f92672">=</span>{
            <span style="color:#e6db74">&#34;code&#34;</span>:<span style="color:#ae81ff">200</span>,
            <span style="color:#e6db74">&#34;data&#34;</span>:change_comments(comment_ser<span style="color:#f92672">.</span>data)
        }

        <span style="color:#66d9ef">return</span> Response(data,status<span style="color:#f92672">=</span><span style="color:#ae81ff">200</span>)
</code></pre></div>
</div>


    </main>

    
  </body>
</html>
